<template>
  <div class="emoji">
    <ul class="emoji-controller">
      <li
        v-for="(pannel, index) in pannels"
        @click="changeActive(index)"
        :class="{ active: index === activeIndex }"
      >
        {{ pannel }}
      </li>
    </ul>
    <ul class="emoji-container">
      <li
        v-for="(emojiGroup, index) in emojis"
        style="padding: 0"
        :key="index"
        v-if="index === activeIndex"
      >
        <a
          href="javascript:;"
          v-for="(emoji, index) in emojiGroup"
          :key="index"
          @click="selectItem(emoji)"
        >
          <span
            class="emoji-item"
            :title="emoji"
            :class="'sprite-' + getPureName(emoji)"
          ></span>
        </a>
      </li>
    </ul>
  </div>
</template>
<script>
import data from "../../emoji/emoji-data.js";
export default {
  name: "emoji",
  data() {
    return {
      emojiData: data,
      pannels: ["表情", "自然", "物品", "地点", "符号"],
      activeIndex: 0,
    };
  },
  methods: {
    changeActive(index) {
      this.activeIndex = index;
    },
    getPureName(name) {
      return name.replace(/:/g, "");
    },
    selectItem(emoji) {
      this.$emit("select", emoji);
    },
  },
  computed: {
    emojis() {
      return this.pannels.map((item) => {
        return Object.keys(this.emojiData[item]);
      });
    },
  },
};
</script>